import React from "react";
import { Form, Icon, Input, Button, Checkbox, Card, message } from "antd";
import { setToken } from "../utils/auth";
import "../css/login.css";
import { checkLogin } from "../services";

// 因为是function调用的所以不需要this
function Login(props) {
  const { getFieldDecorator } = props.form;
  const handleSubmit = (e) => {
    e.preventDefault();
    props.form.validateFields((err, values) => {
      if (!err) {
        console.log(values);
        checkLogin({
          phone: values.username,
          password: values.password,
        }).then((res) => {
            console.log(res)
          if (res.code == '0') {
            message.success("登录成功");
            setToken(res.data.token);
            props.history.push("/admin");
          }
        });
      }
    });
  };
  return (
    <Card title="管理后台" className="loginForm">
      <Form onSubmit={(e) => handleSubmit(e)} className="login-form">
        <Form.Item>
          {getFieldDecorator("username", {
            rules: [{ required: true, message: "请输入用户名!" }],
          })(
            <Input
              prefix={<Icon type="user" style={{ color: "rgba(0,0,0,.25)" }} />}
              placeholder="用户名"
            />
          )}
        </Form.Item>
        <Form.Item>
          {getFieldDecorator("password", {
            rules: [{ required: true, message: "请输入密码!" }],
          })(
            <Input
              prefix={<Icon type="lock" style={{ color: "rgba(0,0,0,.25)" }} />}
              type="password"
              placeholder="密码"
            />
          )}
        </Form.Item>
        <Form.Item>
          {getFieldDecorator("remember", {
            valuePropName: "checked",
            initialValue: true,
          })(<Checkbox>记住我</Checkbox>)}
          <Button
            type="primary"
            htmlType="submit"
            className="login-form-button"
          >
            登录
          </Button>
        </Form.Item>
      </Form>
    </Card>
  );
}

export default Form.create({ name: "LoginForm" })(Login);
